<template>
    <div>
        <el-form
            :label-width="80"
            :model="form"
            class="myform"
            status-icon 
            :rules="rules"
            ref="myform"
        >
            <el-form-item label="用户名称"  prop="username">
                <el-input 
                    type="text" 
                    placeholder="请输入" 
                    v-model="form.username"
                    :prefix-icon="User"    
                ></el-input>
            </el-form-item>
             <el-form-item label="登录密码" prop="password">
                <el-input 
                    type="password"
                    placeholder="请输入" 
                    v-model="form.password"
                    show-password
                    :prefix-icon="Lock"    
                    ></el-input>
            </el-form-item>
            <el-form-item>
                <p class="flex">
                    <el-button type="primary" class="btn" @click="submitForm('myform')"
                        >登录</el-button
                    >
                    <el-button type="danger" class="btn" @click="resetForm('myform')">重置</el-button>
                </p>
            </el-form-item>
            <el-form-item class="lastitem">
                <div class="links">
                    <router-link class="litem" :to="{name:'register'}">
                        没有账号,立即注册
                    </router-link>
                        <router-link class="litem color"  :to="{name:'forgetpass'}">
                        忘记密码 
                    </router-link>
                </div>
            </el-form-item>
        </el-form> 
    </div>
</template>


<script>
import {toRefs,reactive ,ref ,onMounted , onBeforeUpdate ,getCurrentInstance} from "vue"
import { Calendar, Search ,User , Lock } from '@element-plus/icons'
import {reg} from "@/utils/validate"
import { ElMessage } from 'element-plus'
import {ajax} from "@/api"
import {useRouter} from "vue-router"
export default {
    setup(props,context){
        
        const {proxy} = getCurrentInstance()
        const myform = ref()
        const router = useRouter()
        const state = reactive({
            form:{
                
            },
            Calendar,
            Search,
            Lock,
            User,
            reg,
            rules:{
                username:[
                    {
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur',
                    },
                ],
                password:[
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur',
                    },
                    {
                        pattern:reg.pwd,
                        trigger:'blur',
                        message:"请输入6-16的数字字母密码组合"
                    }
                ]
            }
        })
        const submitForm = ()=>{
            myform.value.validate(async valid=>{
                if(valid){
                    // 正则通过
                    // ajax login 
                    const {code,result,token} = await ajax.login(state.form)
                        console.log(code,result)
                    if(code==200){
                        router.push({name:'main'})
                        localStorage.setItem("username",result.username)
                        sessionStorage.setItem("token",token)
                    }
                }else{
                     ElMessage.error('登录信息有误,请重新输入')
                }
            })
        }
        onMounted(()=>{
            // bug 
            console.log(proxy)
            if(proxy.$root.$route.query.username ){
                state.form.username = proxy.$root.$route.query.username 
            }else{
                state.form.username = localStorage.getItem("username")
            }
            
        })
        onBeforeUpdate(()=>{
            // console.log(props)
        })
        const resetForm = ()=>{
            // state.form = {}
            myform.value.resetFields() 
        }
        return {
            ...toRefs(state),
            myform,
            submitForm,
            resetForm
        }
    }
}
</script>

<style lang="scss" scoped>


</style>